{% extends "base.html" %}
{% block title %}我的作品集{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename="css/style_port.css") }}">
{% endblock %}
{% block body_property %} onload="init_f();" onhashchange="show_init();" style="background-color: #f3eedc"{% endblock %}
{% block content %}
    <div style="background-color: #867f75; filter:alpha(opacity=50);">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <p id="uid" hidden>{{ uid }}</p>
                    <h1 style="margin: 20px 0 0 0; font-family: time,serif;color: #000000">{{ username }}的作品集</h1>
                    <h4 style="font-family: time,serif;color: #feeac5">{{ introduction }}</h4>

                </div>
                <a id="ind_a" href="{{ url_for('login') }}" style="display: none;">index</a>
                <a id="set_a" href="{{ url_for('setting') }}" style="display: none;">setting</a>
                <a id="exit_a" href="{{ url_for('logout') }}" style="display: none;">exit</a>
                <div class="col-md-1">
                    <div class="imgbutton indexbutton" style="margin: 15px 0 0 0;" onclick="ind_a.click()"></div>
                </div>
                <div class="col-md-1">
                    <div class="imgbutton setbutton" style="margin: 15px 0 0 0;" onclick="set_a.click()"></div>
                </div>
                <div class="col-md-1">
                    <div class="imgbutton exitbutton" style="margin: 15px 0 0 0;" onclick="exit_a.click()"></div>
                </div>
            </div>
        </div>
        <br>
    </div>

    <div class="col-sm-3 col-md-2 " style="background-color:#a39b8f;">
        <hr>
        <div class="row">
            <div class="col-md-2">
                <button type="button" class="btn-primary changeB"></button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn-primary addB" onclick="addModal();"></button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn-primary upB" onclick="upModal();"></button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn-primary downB" onclick="downModal();"></button>
            </div>
            <div class="col-md-2" style="color: #feeac5; font-size: 20px">
                ^_^
            </div>
        </div>
        <hr>
        <ul id="myNav" class="nav nav-sidebar">

        </ul>
        <!-- 边栏结束 -->
    </div>
    <!-- 右边的展示区 -->
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-7"><h4>当前目录：<span id="curdir">作品集首页</span></h4></div>
            <div class="col-md-3">
                <form class="form-horizontal" method="post" action="{{ url_for('search') }}">
                    <div class="input-group" style="margin-top:5px;margin-right: -80px;margin-left: 60px; ">
                        <input type="text" id="search" class="form-control" placeholder="Search for..." name="keyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon" aria-hidden="true">
                                    给我搜！
                                </span>
                            </button>
                        </span>
                    </div><!-- /input-group -->
                </form>
            </div>
            <div class="col-md-2"><h4><a href="#" class="pull-right" style="color: #f08769">返回首页</a></h4></div>
        </div>
        <hr>
        <div class="row col-md-12" id="show">
            <!-- 试图在这里面塞下图片们 -->
        </div>
    </div>

    <!-- 按钮触发模态框 -->
    <!-- Button trigger modal -->
    <!-- Modal -->
    <!-- 下载用模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="downModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">下载文件夹</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-offset-4 col-xs-4"><h2 class="text-center">下载</h2></div>
                    </div>
                    <form class="form-horizontal" method="post" action="{{ url_for('download') }}">
                        <div class="form-group">
                            <label for="Cata_now" class="col-xs-2 control-label">文件夹</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <input title="did" id="Cata_now_did" type="text" name="did" hidden>
                                    <input id="Cata_now" type="text" readonly="readonly" class="form-control"
                                           placeholder="DAM" required>
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目录选择
                                            <span class="caret"></span></button>
                                        <ul id="cata" class="dropdown-menu dropdown-menu-right">
                                            <!--这里会动态添加目录-->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <input type="submit" class="btn btn-default" id="submit_btn" value="下载">
                                <button type="button" data-dismiss="modal" class="btn btn-default" id="close">关闭
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <footer class="footer">选择你要下载的文件夹，会打包下载哦！</footer>
                </div>
            </div>
        </div>
    </div>
    <!-- 更改图片信息 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="imgModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">更改图片信息</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-offset-4 col-xs-4"><h2 class="text-center">更新</h2></div>
                    </div>
                    <form class="form-horizontal" method="post">
                        <input type="hidden" class="form-control" id="imgModal_pid" name="pid" value="0">
                        <input type="hidden" class="form-control" id="imgModal_fid" name="fid" value="0">
                        <div class="form-group">
                            <label for="picName" class="col-xs-2 control-label">图片名</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" id="picName" name="title" placeholder="我的图片">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="picDes" class="col-xs-2 control-label">介绍</label>
                            <div class="col-xs-10">
                                <input maxlength="25" class="form-control" id="picDes" name="description"
                                       placeholder="0-25字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tag" class="col-xs-2 control-label">标签</label>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="imgModal_tag_1" name="tag_1" placeholder="标签1">
                            </div>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="imgModal_tag_2" name="tag_2" placeholder="标签2">
                            </div>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="imgModal_tag_3" name="tag_3" placeholder="标签3">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <input title="type" type="text" name="type" value="Attribute" hidden>
                                <input type="submit" class="btn btn-default" id="submit_btn" value="提交">
                                <button type="button" data-dismiss="modal" class="btn btn-default" id="close">关闭
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <footer class="footer">点击图片更改名称和介绍</footer>
                </div>
            </div>
        </div>
    </div>
    <!-- 上传用 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="upModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">上传文件</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-offset-4 col-xs-4"><h2 class="text-center">上传</h2></div>
                    </div>
                    <form class="form-horizontal" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="Cata_up" class="col-xs-2 control-label">文件夹</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <input title="pid" id="Cata_up_pid" type="text" name="pid" hidden>
                                    <input id="Cata_up" type="text" readonly="readonly" class="form-control"
                                           placeholder="P1" required>
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目录选择
                                            <span class="caret"></span></button>
                                        <ul id="cataUp" class="dropdown-menu dropdown-menu-right">
                                            <!--这里会动态添加目录-->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="avatar_l" class="col-xs-2 control-label">图片</label>
                            <div class="col-xs-3">
                                <img onclick="file_up.click()" id="avatar_now"
                                     src="{{ url_for('static', filename="images/avatarKen.png") }}"
                                     class="img-thumbnail avatar">
                                <input type="file" id="file_up" name="photo" style="display: none;"/>
                            </div>
                            <div class="col-xs-7">
                                <p style="margin-top:80px;">点击图片上传</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="picName_up" class="col-xs-2 control-label">图片名</label>
                            <div class="col-xs-9">
                                <input maxlength="10" type="text" class="form-control" id="picName" name="title"
                                       placeholder="0-10字" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="picDes_up" class="col-xs-2 control-label">介绍</label>
                            <div class="col-xs-9">
                                <input maxlength="25" class="form-control" id="picDes" name="description"
                                       placeholder="0-25字" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tag" class="col-xs-2 control-label">标签</label>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="tag_1" name="tag_1" placeholder="标签1">
                            </div>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="tag_2" name="tag_2" placeholder="标签2">
                            </div>
                            <div class="col-xs-3">
                                <input maxlength="4" class="form-control" id="tag_3" name="tag_3" placeholder="标签3">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <input title="type" type="text" name="type" value="Photo" hidden>
                                <input type="submit" class="btn btn-default" id="submit_btn" value="上传">
                                <button type="button" data-dismiss="modal" class="btn btn-default" id="close">关闭
                                </button>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <footer class="footer">选择你要上传的文件夹，记得要写图片名和介绍哦！</footer>
                </div>
            </div>
        </div>
    </div>
    <!-- 增加目录用 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">在选择的文件夹下新建文件夹</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-offset-4 col-xs-4"><h2 class="text-center">添加目录</h2></div>
                    </div>
                    <form class="form-horizontal" method="post">
                        <div class="form-group">
                            <label for="Cata_add" class="col-xs-2 control-label">文件夹</label>
                            <div class="col-xs-9">
                                <div class="input-group">
                                    <input id="Cata_add" type="text" readonly="readonly" class="form-control "
                                           placeholder="DAM" name="pname" required>
                                    <input title="pid" id="Cata_add_pid" type="text" name="pid" hidden>
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目录选择
                                            <span class="caret"></span></button>
                                        <ul id="cataAdd" class="dropdown-menu dropdown-menu-right">
                                            <!--这里会动态添加目录-->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="folderName" class="col-xs-2 control-label">文件夹名</label>
                            <div class="col-xs-9">
                                <input maxlength="10" type="text" class="form-control" id="folderName" name="name"
                                       placeholder="0-10字" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <div class="checkbox">
                                    <label>
                                        <input class="pull-left" type="checkbox" name="rtype">是否作为「父目录」
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <input title="type" type="text" name="type" value="Directory" hidden>
                                <input type="submit" class="btn btn-default" id="submit_btn" value="新建">
                                <button type="button" data-dismiss="modal" class="btn btn-default" id="close">关闭
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <footer class="footer">可以在「父文件夹」下新建父文件夹／普通文件夹</footer>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts_after_jq %}
    <script>
        // 这些是用来初始化sidebar的函数,和后端交互的部分被注释，自己构造的结果在最后注上了*号
        var dataTemp = [{List: [1, 2, 3], type: [1, 1, 1], dName: ["DAM", "数字摄影", "计算机动画"]},
            {List: [4, 5, 6], type: [2, 2, 2], dName: ["A1", "A2", "A3"]},
            {List: [7, 8], type: [1, 2], dName: ["秋学期", "冬学期"]},
            {List: [9, 10], type: [2, 2], dName: ["P1", "P2"]},
            {fid: [1, 2]},
            {fid: [3, 4, 5, 12]},
            {fid: 6},
            {List: [11, 12], type: [2, 2], dName: ["紫金港", "玉泉"]},
            {fid: 7},
            {fid: 8},
            {fid: 9},
            {fid: 10},
            {fid: 11}];//*
        var normalCata = [];//用来存放普通文件夹的名字
        var nC_count = 0;
        var Cata = [];//用来存放所有文件夹的名字
        var C_count = 0;
        var parentCata = [];
        var pC_count = 0;
        var uid = $('#uid').html();

        function init_f() {
            init_sidebar();
            show_init();
            loadUpCata();
            loadCata();
            loadAddCata();
        }

        function getChildFolder(did) {
            var Layer = dataTemp[did];//*
            $.get("query", {'did': did}, function (data) {
                Layer = data;
                if (Layer.List) {
                    var len = Layer.List.length;
                    var flagHR = false;//用来控制加不加入hr的
                    for (var i = 0; i < len; i++) {
                        if (Layer.type[i] === 1) {
                            var $li = $('<li data-toggle="collapse" class="f-nav"></li>');
                            var $a = $('<a class="aWhite f-nav-a" onclick="changeFolder(this);">▲ ' + Layer.dName[i] + '</a>');
                            $li.attr("href", "#" + Layer.List[i]);
                            $li.append($a);
                            $("#" + did).append($li);
                            var $ul = $('<ul style="list-style: none;" class="collapse" id="' + Layer.List[i] + '"></ul>');
                            $("#" + did).append($ul);
                            getChildFolder(Layer.List[i]);
                        }
                        else {
                            var $li = $('<li class="f-nav"></li>');
                            var $a = $('<a href="#' + Layer.List[i] + '" class="aWhite f-nav-a">■ ' + Layer.dName[i] + '</a>');
                            $li.append($a);
                            $("#" + did).append($li);
                            flagHR = true;
                        }
                    }
                }
            });
        }

        function init_sidebar() {
            var Layer1 = {};
            //前端向后端请求根目录root<不在页面上显示，相当于用户的界面>（假设did=0）下所有的文件夹的id和名字
            $.get("query", {'did': {{ root_id }}}, function (data) {
                Layer1 = data;
                console.log(Layer1);
                if (Layer1 === {}) {
                    //获得的json对象为空
                    alert("没有子文件夹喔！");
                }
                else {
                    if (Layer1.List) {
                        var len = Layer1.List.length;
                        for (var i = 0; i < len; i++) {
                            var $li;
                            var $a;
                            if (Layer1.type[i] === 1) {
                                $li = $('<li data-toggle="collapse"></li>');
                                $a = $('<a onclick=changeFolder(this);>▲ ' + Layer1.dName[i] + '</a>');
                                $li.attr("href", "#" + Layer1.List[i]);
                            }
                            else {
                                $li = $('<li></li>');
                                $a = $('<a class="f-nav-a">■ ' + Layer1.dName[i] + '</a>');
                                $a.attr("href", "#" + Layer1.List[i]);
                            }
                            $li.append($a);
                            $("#myNav").append($li);
                            if (Layer1.type[i] === 1) {
                                var $ul = $('<ul style="list-style: none;" class="collapse" id="' + Layer1.List[i] + '"></ul>');
                                $("#myNav").append($ul);
                                getChildFolder(Layer1.List[i]);
                            }
                        }
                    }
                }
            });
        }

        // 这是用来初始化展示界面，使用了location.hash
        function show_init() {
            $("#show").empty();
            var did = location.hash;
            if (did === "" || did === "#0") {
                $('#curdir').html("作品集首页");
                $("#show").append("<p style=color:#f08769>▶关于作品集的使用说明</p>");
                $("#show").append("<p style=color:#867f75><u>Q:如何查看自己的作品？</u></p>");
                $("#show").append("<p style=color:#867f75><b>A</b>:可以通过左边的文件浏览器查看，带有 ▲／▼ 的是「父文件夹」，可以展开和收起。带有 ■ 的是「普通文件夹」，用来存放作品。点击普通文件夹就可查看对应课程下的作品。</p>");
                $("#show").append("<p style=color:#867f75><u>Q:什么是「父文件夹」&「普通文件夹」？</u></p>");
                $("#show").append("<p style=color:#867f75><b>A</b>:带有 ▲／▼ 的是「父文件夹」，可以展开和收起。不能放入作品，只能放入下级文件夹。带有 ■ 的是「普通文件夹」，用来存放作品，不能增加下级文件夹。</p>");
                $("#show").append("<p style=color:#f08769>▷待补充</p>");
            }
            else {
                var IDint = parseInt(did.substring(1));
                $.get("query", {'namefordid': IDint}, function (data) {
                    var dname = data;
                    $('#curdir').html(dname);
                });
                var IDfile;
                $.get("query", {'did': IDint}, function (data) {
                    IDfile = data;
                    IDfile.fid = IDfile.List;
                    var len = IDfile.fid.length;
                    var count = 0;
                    for (var i = 0; i < len; i++) {
                        if (count % 3 === 0) {
                            $("#show").append("<div class=row id=pic" + count / 3 + "></div>");
                        }
                        var fileM;
                        $.get("query", {'fid': IDfile.fid[i]}, function (data) {
                            fileM = data;
                            if (fileM.status === "success") {
                                var IDnow = "pic" + parseInt(count / 3);
                                $("#" + IDnow).append('<div class=col-md-4><div class=product-type-container><div class=product-type-overlay id=fid' + fileM.fid + ' onclick=imgModal(' + fileM.fid + ');><div class=product-type-info><h3  class=text-uppercase style=color:#000>' + fileM.title + '</h3><p class=text-uppercase style=color:#281a0d>' + fileM.description + '</p></div></div><img  src=' + fileM.path + ' alt=\'Men fashion 1\' class=\'product-type-img img-collection gold-border\'></div></div>');
                                count++;
                            }
                        });
                    }
                });
            }
        }
    </script>
    <script>
        function imgModal(fid) {
            var fileM;
            $.get("query",{'fid': fid},function(data){
                fileM=data;
                $("#picName").attr('value', fileM.title);
                $("#picDes").attr('value', fileM.description);
                $("#imgModal_pid").attr('value', fileM.pid);
                $("#imgModal_fid").attr('value', fid);
                $("#imgModal_tag_1").attr('value', fileM.tag_1);
                $("#imgModal_tag_2").attr('value', fileM.tag_2);
                $("#imgModal_tag_3").attr('value', fileM.tag_3);
                $("#imgModal").modal("toggle");
            });
        }

        function downModal() {
            $("#downModal").modal("toggle");
        }

        function upModal() {
            $("#upModal").modal("toggle");
        }

        function addModal() {
            $("#addModal").modal("toggle");
        }

        function changeFolder(obj) {
            var finalStr = $(obj).text().substring(1);
            if ($(obj).text()[0] === "▲") {
                $(obj).text("▼" + finalStr);
            }
            else if ($(obj).text()[0] === "▼") {
                $(obj).text("▲" + finalStr);
            }
        }

        function unfold(folderNum, count, blank) {
            var str = $("#folder" + folderNum).text();
            var finalStr = str.substring(0, blank) + "▲" + str.substring(1 + blank);
            $("#folder" + folderNum).text(finalStr);
            $("#folder" + folderNum).attr('onclick', "fold(" + folderNum + ',' + count + ',' + blank + ");");
            for (var i = 1; i <= count; i++) {
                $("#folder" + folderNum + i).show();
            }
        }

        function fold(folderNum, count, blank) {
            var str = $("#folder" + folderNum).text();
            $("#folder1").text("hei");
            var finalStr = str.substring(0, blank) + "▼" + str.substring(1 + blank);
            $("#folder" + folderNum).text(finalStr);
            $("#folder" + folderNum).attr('onclick', "unfold(" + folderNum + ',' + count + ',' + blank + ");");
            for (var i = 1; i <= count; i++) {
                if ($("#folder" + folderNum + i).attr("onclick").substring(0, 4) !== "unfo") {
                    $("#folder" + folderNum + i).click();
                }
                $("#folder" + folderNum + i).hide();
            }
        }
    </script>
    <script>
        function loadAddCata() {
            $.get("query", {'uid': uid, 'type': 1}, function (data) {
                parentCata = data;
                for (var k in parentCata) {
                    var node = document.createElement("LI");
                    var Cata_a = document.createElement("A");
                    Cata_a.innerHTML = parentCata[k];
                    Cata_a.setAttribute('onclick', "changeAddCata(this.innerHTML, " + k + ");");
                    node.appendChild(Cata_a);
                    document.getElementById("cataAdd").appendChild(node);
                }
            });
        }

        function changeAddCata(name, id) {
            document.getElementById("Cata_add").setAttribute('value', name);
            document.getElementById("Cata_add_pid").setAttribute('value', id);
        }

        function loadUpCata() {
            $.get("query", {'uid': uid, 'type': 2}, function (data) {
                normalCata = data;
                for (var k in normalCata) {
                    var node = document.createElement("LI");
                    var Cata_a = document.createElement("A");
                    Cata_a.innerHTML = normalCata[k];
                    Cata_a.setAttribute('onclick', "changeUpCata(this.innerHTML, " + k + ");");
                    node.appendChild(Cata_a);
                    document.getElementById("cataUp").appendChild(node);
                }
            });
        }

        function changeUpCata(name, id) {
            document.getElementById("Cata_up").setAttribute('value', name);
            document.getElementById("Cata_up_pid").setAttribute('value', id);
        }

        function loadCata()//动态生成下拉菜单中的目录选项
        {
            $.get("query", {'uid': uid, 'type': 0}, function (data) {
                Cata = data;
                for (var k in Cata) {
                    var node = document.createElement("LI");
                    var Cata_a = document.createElement("A");
                    {#                    if (Cata[i] !== "-") {#}
                    Cata_a.innerHTML = Cata[k];
                    Cata_a.setAttribute('onclick', "changeCata(this.innerHTML, " + k + ");");
                    node.appendChild(Cata_a);
                    document.getElementById("cata").appendChild(node);
                }
            });
        }

        function changeCata(name, id) {
            document.getElementById("Cata_now").setAttribute('value', name);
            document.getElementById("Cata_now_did").setAttribute('value', id);
        }

        document.getElementById('file_up').onchange = function () {
            var imgFile = this.files[0];
            var fr = new FileReader();
            fr.onload = function () {
                document.getElementById('avatar_now').src = fr.result;
            };
            fr.readAsDataURL(imgFile);
        };
    </script>
{% endblock %}